<template>
  <q-timeline color="secondary" class="q-px-md">
    <template v-for="(step,stepIndex) in eventItem.step" :key="step.id">
      <q-timeline-entry :subtitle="step.type">
        <template #subtitle>
          <div class="row justify-between">
            <span>{{step.type}}</span>
            <q-btn icon="mdi-close" flat dense size="sm" rounded @click="deleteStep(eventItem, stepIndex)"></q-btn>
          </div>
        </template>
        <div v-if="step.type === 'openDialog'" style="width: 100%;" class="q-gutter-sm">
          <q-input v-model="step.title" label="弹窗标题" dense filled></q-input>
          <PageSelector dense filled v-model="step.pageKey"></PageSelector>
          <q-toggle label="只读" class="q-pr-md" dense filled v-model="step.readonly"></q-toggle>
          <q-input v-model="step.data" label="携带数据" dense filled></q-input>
          <q-input v-model="step.width" label="弹窗宽" dense filled></q-input>
          <q-input v-model="step.height" label="弹窗高" dense filled></q-input>
          <q-input v-model="step.btns" label="弹窗按钮" dense filled></q-input>
        </div>
        <div v-if="step.type === 'eval'" style="width: 100%;height: 50px;">
          <CodeEditor v-if="step.hasOwnProperty('value')" v-model="step.value"></CodeEditor>
        </div>
        <div v-if="step.type === 'autoApi'" class="q-gutter-sm">
          <q-input v-model="step.url" label="接口地址" dense filled></q-input>
          <q-input v-model="step.data" label="发送参数" dense filled></q-input>
          <q-input v-model="step.resultKey" label="暂存字段" dense filled></q-input>
        </div>
        <div v-if="step.type === 'layerFunc'" class="q-gutter-sm">
          <q-select use-input new-value-mode="add-unique" :options="refList" @filter="filterFn" v-model="step.layerId" label="图层id" dense filled></q-select>
          <q-select use-input new-value-mode="add-unique" :options="refFuncMap[step.layerId]" @filter="(val, update) => filterFn2(val, update, step)" v-model="step.funcName" label="方法名" dense filled></q-select>
          <div v-for="(item,index) in getFuncArgLength(step)" :key="index">
            <q-input v-model="step[`#/$Array_params/${index}`]" :label="`参数${item}`" dense filled></q-input>
          </div>
        </div>
      </q-timeline-entry>
    </template>
  </q-timeline>
</template>

<script setup>
import { ref } from 'vue';
import CodeEditor from '../components/CodeEditor/index.vue';
import { RW } from 'dlsjs';
const isOpen = ref(true)

</script>

<style scoped>

</style>
